<template>
    <div class="stencil_plate">
             <div class="plate_wrap">
      <div class="header">
        <div class="header_top">
          <el-button size="medium" @click.stop="newBuilt">添加模板</el-button>
        </div>
        <div class="header_bottom">
          <div class="header_left">
            <div class="header_name">
              场馆名称：
              <el-select v-model="value9" @change="gid()" placeholder="请选择">
                <el-option
                  v-for="item in options9"
                  :key="item.value"
                  :label="item.label"
                  :value="item.gym_name">
                </el-option>
              </el-select>
            </div>

            <div class="header_number">
              模版数量：
              <span>{{num}}</span>
            </div>
          </div>
          <div class="header_right">
            <div class="header_ipt">
              <span class="el-icon-search"></span>
              <input type="text"  v-model="mhcx" placeholder="输入模板名称">
              <button @click="hmcxs()">查询</button>
            </div>
          </div>
        </div>
      </div>
              <div class="plate_content">
                  <ul>
                      <li v-for="item in  options10">
                          <h3>{{item.action_name}}</h3>
                          <p>老师：<span>{{item.coach_name}}</span></p>
                          <p>时间：<span>{{item.action_time | formatDate}}~{{item.end_time | formatDate}}</span></p>
                          <p>教室：<span>{{item.room}}</span></p>
                          <p>难度：
                               <el-rate v-model="item.level"></el-rate>
                          </p>
                          <p>人数限制：<span>{{item.min_people}}~{{item.max_people}}人</span></p>
                   <div class="content_edit">
                       <ol>
                           <li @click="cxdg(item)"><span class="el-icon-edit"></span></li>
                           <li @click="sc(item)"><span class="el-icon-delete"></span></li>
                       </ol>
                   </div>
                   <div class="content_line"></div>
                  </li>
                     
                  </ul>
              </div>
              <div style="float:right;margin-right:29%;margin-top:-1.7%">
                    <el-pagination
                  @current-change='yemian'
                  :current-page='yeshu'
                  layout="prev, pager, next"
                  :total='num'>
                  </el-pagination>
              </div>
             </div>

       <div class="Add_timetable"  v-show="addActive">
           <div class="add_list">

               <div class="add_top">
          <p>{{state}}课表</p>
          <span class="el-icon-circle-close" @click.stop="hide"></span>
        </div>
        <div class="add_bottom">
          <ul>
            <li>
              <div class="add_choose">
                <span>课程名称：</span>
                <el-input v-model="mc" placeholder="请输入内容"></el-input>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>授课老师：</span>
                  <el-input v-model="ls" placeholder="请输入内容"></el-input>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>授课教室：</span>
                <el-input v-model="js" placeholder="请输入内容"></el-input>
              </div>
            </li>
             <li>
              <div class="add_choose">
                <span>课程开始日期：</span>
                 <div class="block">
                <el-date-picker
                  v-model="kcrq"
                  style="width: 122%;padding-left:7% !important;margin-left:-7%"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>上课时间：</span>
                <el-time-picker
                  v-model="sksj"
                   format="HH:mm"
                  style="padding-left:1% !important;margin-left:-1%"
                  :picker-options="{
    }"
                  placeholder="任意时间点"
                ></el-time-picker>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>结束时间：</span>
                <el-time-picker
                  v-model="jssj"
                   format="HH:mm"
                  style="padding-left:1% !important;margin-left:-1%"
                  :picker-options="{
    }"
                  placeholder="任意时间点"
                ></el-time-picker>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>人数限制：</span>
                <el-input v-model="zs" placeholder="最少" style="width: 22%"></el-input>
                <font>到</font>
                <el-input v-model="zd" placeholder="最多" style="width: 22%;"></el-input>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>课程难度：</span>
                <el-rate v-model="nd"></el-rate>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>课程颜色：</span>
                <el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
              </div>
            </li>
            <li class="add_img">
              <div class="add_choose">
                <span>课程图片：</span>
                <img :src='image' style="width: 18%;" alt>
                <div class="add_image" v-if="seen" style="position: absolute;left: 17%;height: 44px;width: 81px;">
                    <i class="el-icon-plus"></i>
                </div>
                <input style="left: 43%;" type="file" id="file" @change="imageChange()" class="file">
                <button>本地选择</button>
              </div>
            </li>
          </ul>
        </div>
        <div class="add_submit" @click.stop="nextPage">下一页</div>
           </div>
       </div> 
        <div class="nextJoin" v-show="nextActive">
            <div class="nextPage" >
                  <div class="next_top">
          <p>课程介绍</p>
          <span class="el-icon-circle-close" @click.stop="nextHide"></span>
        </div>
        <div class="next_bottom">
            <ul>
                <li>
                    <p>课程特点:</p>
                    <el-input
                      type="textarea"
                      :rows="5"
                      placeholder="字数限制300字以内"
                      v-model="td">
                    </el-input>
                </li>
                 <li>
                    <p>试用人群:</p>
                    <el-input
                      type="textarea"
                      :rows="5"
                      placeholder="字数限制300字以内"
                      v-model="rq">
                    </el-input>
                </li>
                <li>
                    <p>练习频次:</p>
                    <el-input
                      type="textarea"
                      :rows="5"
                      placeholder="字数限制300字以内"
                      v-model="pl">
                    </el-input>
                </li>
            </ul>
           <el-row>
                <el-button type="primary" @click.stop="lastPage">上一页</el-button>
                <el-button type="success" @click.stop="hold">保存</el-button>
           </el-row>
          </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
        state:'',
        options9:'',
        yeshu:1,
        options10:'',
        value9: '',
        input:'',
        seen:true,
        value1:4,
        num:'',
        mhcx:'',
        kcrq:'',
        value2: new Date(),
        addActive:false, 
        nextActive:false,
        gymId:'',
        color5: "rgba(255, 69, 0, 0.68)",
       textarea: '',
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ],
      mc:'',
      ls:'',
      js:'',
      sksj:'',
      jssj:'',
      zd:'',
      zs:'',
      nd:'',
      td:'',
      rq:'',
      pl:'',
      image:'',
      type:'',
      mbId:'',
      optionsDemo:''
        }
    },
    created(){
      this.ajax()
    },
    filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return h + ":" + m;
    }
  },
    methods:{
      yemian(yeshu){
            this.ajax('',yeshu)
    },  
    cxdg(item){
        this.state='修改'
        this.type='2'
        var obj={
            gymId:this.gymId,
            templateId:item.id
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findTemplateByAdminidAndTemplateId", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
            _this.addActive = true; 
            _this.mc=response.data.data.action_name
            _this.ls=response.data.data.coach_name
            _this.js=response.data.data.room
            _this.zd=response.data.data.max_people
            _this.zs=response.data.data.min_people
            _this.nd=response.data.data.level
            _this.sksj=response.data.data.action_time
            _this.jssj=response.data.data.end_time
            _this.color5=response.data.data.color
            _this.image=response.data.data.coach_photo
            _this.td=response.data.data.characteristic
            _this.rq=response.data.data.apply_people
            _this.pl=response.data.data.frequency
            // var d=new Date(response.data.data.action_date)
            // console.log(parseInt(d))
            var str = response.data.data.action_date;
            str = str.replace(/-/g, '/');
             
            var date = new Date(str);
            _this.kcrq=date.setDate(date.getDate())
            _this.mbId=response.data.data.id
            // console.log(date.setDate(date.getDate() + 1))
        })
        .catch((error)=> {
            console.log(error);
        });
    },  
    imageChange: function() {
            setTimeout(() => {
                var _this = this;
                var file = document.getElementById("file").files[0];
                // console.log(document.getElementById("file"));
                var formData = new FormData();
                formData.append("image", file);
                console.log(formData);
                let obj = {
                //请求的参数
                formData: formData
                };
                $.ajax({
                url: "http://yogahome.top/yujia/admin/uploadimage",
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                async: false,
                success: function(result) {
                    if (result.message == "文件路径生成成功") {
                      _this.seen=false
                    // mui.toast("图片上传成功");
                       _this.$message({
                        type: 'success',
                        message: '图片上传成功!'
                    });
                      _this.image = result.data;
                    } else if (result.code == "-1") {
                    // mui.toast(result.message);
                        _this.$message({
                        type: 'error',
                        message: '上传失败!'
                    });
                    }
                }
                });
            });
        },  
    sc(item){
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let obj = {
             gymId:this.gymId,
             templateId:item.id
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/setTemplateValidState", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
           if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                _this.ajax()
            }else{
                 _this.$message({
                    type: 'error',
                    message: '删除失败!'
                });
            }
        })
        .catch((error)=> {
            console.log(error);
        });
       
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    hmcxs(){
        this.ajax(this.mhcx)
      },
    gid(){
          var arr=this.options9
          this.optionsDemo=this.value9
          console.log(this.optionsDemo)
          for (var i=0;i<arr.length;i++){
            if(this.value9 == arr[i].gym_name){
               this.gymId=arr[i].id
            }
          }
          this.ajax()
          
    },
    ajax(mhcx,yeshu){
       let obj = {
        }
        let _this = this;
        let qs = require("qs");
         this.$axios.post("yujiaextend/gymadmin/findAllGymBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
          // console.log(_this.$route.query.gymId !=undefined)
          if(_this.$route.query.gymId != undefined){
             _this.gymId=_this.$route.query.gymId
          }else{
             if( _this.gymId == ''){
              _this.gymId=response.data.data[0].id
          }
          }
          _this.options9=response.data.data
           if(_this.$route.query.name != undefined){
             _this.value9=_this.$route.query.name
           }else{
              _this.value9=JSON.stringify(response.data.data[0].gym_name).replace(/"/g, " ")
           }
          if(_this.optionsDemo != ''){
             _this.value9=_this.optionsDemo
          }
          var obj={
            gymId:_this.gymId,
            name:mhcx,
            page:yeshu
          }
          let qs = require("qs");
          _this.$axios.post("/yujiaextend/gymadmin/findAllTemplateByAdminidBySuperAdmin", qs.stringify(obj), {
              headers: {
              "Content-Type": "application/x-www-form-urlencoded"
              }
          })
          .then((response) =>{
              _this.options10=response.data.data[1]
              _this.num=response.data.data[0]
                if(response.data.data[1]== ''){
                _this.$message({
                    message: '暂无该馆',
                    type: 'warning'
                  });     
           }
          })
          .catch(function(error) {
              console.log(error);
          });
        })
        .catch(function(error) {
            console.log(error);
        });
    },
    newBuilt(){
        this.state='新增'
        this.type='1'
        this.addActive = true;
    },
    hide(){
          let _this = this;
            _this.addActive = false;
            _this.nextActive = false;
            _this.mc=''
            _this.ls=''
            _this.js=''
            _this.zd=''
            _this.zs=''
            _this.nd=''
            _this.sksj=''
            _this.jssj=''
            _this.color5=''
            _this.image=''
            _this.td=''
            _this.rq=''
            _this.pl=''
    },
    nextPage(){
      this.addActive = false; 
      this.nextActive = true;
    },
    nextHide(){
        this.nextActive = false;
    },
    lastPage(){
        this.nextActive = false;
          this.addActive = true;
    },
    hold(){
      var d=new Date(this.sksj)
      var year = d.getFullYear();
      var month = d.getMonth();
      var day = d.getDate();
      var hours = d.getHours();
      var min = d.getMinutes();
      var actionTime=year+'-'+(Number(month)+1)+'-'+day+' '+hours+':'+min
      var d=new Date(this.jssj)
      var year = d.getFullYear();
      var month = d.getMonth();
      var day = d.getDate();
      var hours = d.getHours();
      var min = d.getMinutes();
      var endTime=year+'-'+(Number(month)+1)+'-'+day+' '+hours+':'+min
      var d=new Date(this.kcrq)
      var year = d.getFullYear();
      var month = d.getMonth();
      var day = d.getDate();
      var hours = d.getHours();
      var min = d.getMinutes();
      var actionDate=year+'-'+(Number(month)+1)+'-'+day+' '+hours+':'+min
      var obj={
        gymId:this.gymId,
        actionName:this.mc,
        coachName:this.ls,
        room:this.js,
        actionDate:actionDate,
        actionTime:actionTime,
        endTime:endTime,
        maxPeople:this.zd,
        minPeople:this.zs,
        level:this.nd,
        color:this.color5,
        image:this.image,
        characteristic:this.td,
        applyPeople:this.rq,
        frequency:this.pl,
        type:this.type,
        templateId:this.mbId
      }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/insertYogaGymAdminTemplateByAdminid", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
           if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: _this.state+'成功!'
                });
                  _this.mc=''
                  _this.ls=''
                  _this.js=''
                  _this.zd=''
                  _this.zs=''
                  _this.nd=''
                  _this.sksj=''
                  _this.jssj=''
                  _this.color5=''
                  _this.image=''
                  _this.td=''
                  _this.rq=''
                  _this.pl=''
                _this.ajax()
                _this.nextActive = false;
            }else{
                 _this.$message({
                    type: 'error',
                    message: _this.state+'失败!'
                });
            }
        })
        .catch((error)=> {
            console.log(error);
        });
    }
    }
}
</script>
<style scoped>
.stencil_plate{
   width: 100%;
  height: 100%;
  background: #f2f2f2;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 2; 
}
/* 版心 */
.plate_wrap{
     width: 100%;

  height: 100%;

  margin-left: 4%;
}
.plate_wrap .header {
  width: 100%;

  margin-top: 35px;
}

.plate_wrap .header .header_top .el-button--medium {
  width: 90px;

  height: 34px;

  background: #2871e9;
}



.el-button {
  color: #fff;
}

.plate_wrap .header .header_bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

  padding-bottom: 20px;

  border-bottom: 1px solid #cdcdcd;
}

.plate_wrap .header .header_bottom .header_left {
  font-size: 16px;

  color: #000000;

  display: flex;

  align-items: center;
}

.el-date-editor {
  width: 100%;
}

.el-date-editor {
  line-height: 35px;
}

.el-select {
  width: 100%;
}

.plate_wrap .header .header_bottom .header_name {
    display: flex;
    align-items: center;
  font-size: 15px;

  color: #000000;
}

.plate_wrap .header .header_bottom .header_name .el-select{
    width: 70%;
}
.plate_wrap .header .header_bottom .header_number {
  font-size: 15px;

  color: #000000;

  margin-left: 45px;
}

.plate_wrap .header .header_bottom .header_number span {
  color: #286fe6;
}

.plate_wrap .header .header_bottom .header_right {
  display: flex;

  align-items: center;

  padding-right: 26%;
}

.plate_wrap .header .header_bottom .header_right .header_ipt {
  height: 30px;

  background: #dfdfdf;

  border-radius: 15px;

  display: flex;

  align-items: center;

  margin-left: 27px !important;
}

.plate_wrap .header .header_bottom .header_right .header_ipt span {
  display: inline-block;

  color: #b9b9b9;

  margin-left: 10px;
}

.plate_wrap .header .header_bottom .header_right .header_ipt input {
  border: none;
height:30px;
  outline: none;

  background: #dfdfdf;

  margin-left: 5px;
}

.plate_wrap .header .header_bottom .header_right .header_ipt button {
  width: 55px;

  height: 26px;
  line-height: 26px;
  padding: 0 10px;
  border: none;

  border-radius: 15px;

  background: #2e7bfb;

  font-size: 14px;

  color: #ffffff;
}

/* 版心结束 */
/* 内容 */
.plate_content{
    width: 78%;
    margin-top: 25px;

}
.plate_content ul{
     width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.plate_content ul>li{
     width: 250px;
    border-radius: 6px;
    background: #fff;
    margin-right: 25px;
    margin-bottom: 38px;
    box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, .1);
}
.plate_content ul>li h3{
    margin-top: 24px;
    padding: 0 20px;
    font-size: 18px;
    color: #000000;

}
.plate_content ul>li p{
    margin-top: 12px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606060;

}
.plate_content ul>li p span{
    color: #000000;
}
.plate_content ul>li .content_edit{
    width: 100%;
     padding: 0 22px;
    margin-top: 12px;
    padding-bottom: 15px;
}
.plate_content ul>li .content_edit ol{
     width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plate_content ul>li .content_edit ol li{
      width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eeeeee;
    padding: 0!important;
    display: flex;
    align-items: center;
    justify-content: center;
 
}
.plate_content ul>li .content_edit ol li:nth-child(2){
       margin-left: 30px;
}
.plate_content ul>li .content_line{
    width: 100%;
    height: 8px;
    background: #95baf8;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

}
/* 内容结束 */

/* 添加课表 */

.Add_timetable {
  width: 100%;

  height: 100%;
  position: absolute;

  left: -250px;

  top: 0;

  z-index: 5;

  background: rgba(0, 0, 0, 0.4);
}
.Add_timetable .add_list {
  width: 560px;

  background: #fff;

  margin: 0 auto;
  margin-top: 40px;

  border-radius: 6px;

  box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);

  padding: 0 40px;

  padding-bottom: 40px;
}
.Add_timetable .add_list .add_top {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 40px;
}
.Add_timetable .add_list .add_top p {
  font-size: 20px;

  padding-bottom: 5px;

  border-bottom: 3px solid #286fe6;

  color: #000;

  font-weight: bold;
}
.Add_timetable .add_list .add_top span {
  font-size: 18px;

  display: inline-block;
}
.Add_timetable .add_list .add_bottom {
  width: 100%;
}
.Add_timetable .add_list .add_bottom ul {
  width: 100%;
}
.Add_timetable .add_list .add_bottom ul li {
  width: 100%;
  margin-top: 30px;
}
.Add_timetable .add_list .add_bottom ul li .add_choose {
  width: 100%;
  display: flex;
  align-items: center;
}
.Add_timetable .add_list .add_bottom ul li .add_choose span {
  width: 20%;
  font-size: 14px;
  color: #000000;
}
.Add_timetable .add_list .add_bottom ul li .add_choose .el-select {
  width: 55%;
}
.Add_timetable .add_list .add_bottom ul li .add_choose .el-input {
    width: 55%;

}
.Add_timetable .add_list
  .add_bottom
  ul
  li
  .add_choose
  .el-button--success.is-plain {
  margin-left: 20px;
  background: #fff;
  color: #286fe6;
  font-size: 14px;
  border: 1px solid #286fe6;
  padding: 8px 8px;
}
.Add_timetable .add_list
  .add_bottom
  ul
  li
  .add_choose
  .el-button--success.is-plain
  i {
  font-size: 12px;
}
.Add_timetable .add_list .add_bottom ul li .add_choose .el-date-editor {
  width: 40%;
}

.Add_timetable .add_list .add_bottom ul li .add_choose font {
  font-size: 16px;
  color: #000000;
  margin: 0 30px;
}
.Add_timetable .add_list .add_bottom ul .add_img {
  margin-top: 20px;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose {
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .add_image {
    width: 140px;
    height:80px;
    border: 1px dashed #cdcdcd;
    text-align: center;

}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .add_image i{
    margin-top: 23px;
    font-size: 18px;
    color: #cdcdcd;
    font-weight: bold;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .add_image  p{
    font-size: 12px;
    color: #aaaaaa;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .file {
  width: 80px;
  height: 30px;
  position: absolute;
  left: 54%;
  bottom: 0;
  outline: none;
  border: none;
  opacity: 0;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose button {
  width: 80px;
  height: 30px;
  margin-left: 22px;
  border-radius: 4px;
  border: 1px solid #286fe6;
  font-size: 14px;
  outline: none;
  background: #fff;
  color: #286fe6;
}
.Add_timetable .add_list .add_bottom ul li .add_choose img {
  /* width: 130px;
  height: 90px; */
}
.Add_timetable .add_list .add_bottom ul li .add_choose .add_word {
  width: 80%;
  text-align: left;
  font-size: 16px;
  color: #286fe6;
  padding-left: 0;
}
.Add_timetable .add_list .add_submit {
  width: 35%;

  height: 40px;

  line-height: 40px;

  margin: 0 auto;

  text-align: center;

  background: #2f7dfe;

  border-radius: 4px;

  margin-top: 70px;

  font-size: 16px;

  color: #fff;
}
/* 下一页 */
.nextJoin {
  width: 100%;

  height: 100%;
  position: absolute;

  left: -250px;

  top: 0;

  z-index: 5;

  background: rgba(0, 0, 0, 0.4);
}
.nextJoin .nextPage{
 width: 560px;

  background: #fff;

  margin: 0 auto;
  margin-top: 40px;

  border-radius: 6px;

  box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);

  padding: 0 40px;

  padding-bottom: 40px;
}
.nextJoin .nextPage .next_top {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 40px;
}
.nextJoin .nextPage .next_top p {
  font-size: 20px;

  padding-bottom: 5px;

  border-bottom: 3px solid #286fe6;

  color: #000;

  font-weight: bold;
}
.nextJoin .nextPage .next_top span {
  font-size: 18px;

  display: inline-block;
}
.nextJoin .nextPage .next_bottom{
    width: 100%;
    margin-top: 50px;
}
.nextJoin .nextPage .next_bottom ul{
    width: 100%;
}
.Add_timetable .nextPage .next_bottom ul li{
    width: 100%;
    margin-top: 30px;
}
.nextJoin .nextPage .next_bottom ul li p{
    font-size: 14px;
    color: #000000;
}
.nextJoin .nextPage .next_bottom ul li .el-textarea{
    width: 90%;
    margin-top: 10px;
}

.nextJoin .nextPage .next_bottom .el-row{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}
.nextJoin .nextPage .next_bottom .el-row .el-button{
    width: 130px;
    height: 35px;
     border: none;
}
.nextJoin .nextPage .next_bottom .el-row .el-button:first-child{
    background: #aaaaaa;
   
}
.nextJoin .nextPage .next_bottom .el-row .el-button:nth-child(2){
    background: #2f7dfd;
    margin-left: 50px
}
/* 下一页结束 */
/* 添加课表结束 */


</style>
<style>
.el-rate{
height:15px;
}
  .el-rate__icon{
    font-size: 15px!important;
    margin-right: 3px;
}   
</style>


